<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div ref="main" style="width:750px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
// 导入echarts
import echarts from 'echarts'

import _ from 'lodash'

// // // 引入主模块
// import echarts from 'echarts/lib/echarts'
// // 引入柱状图
// import 'echarts/lib/chart/line'
// // 引入提示框和标题组件
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'

export default {
  data() {
    return {}
  },
  mounted() {
    // 绘制图表
    this.paintData()
  },
  methods: {
    // 绘制图表
    async paintData() {
      const { data: res } = await this.$http.get('reports/type/1')
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message({
          message: '删除参数失败',
          type: 'error',
          duration: 1000
        })
      }

      // console.log(res.data)
      // 初始化echarts
      var myChart = echarts.init(this.$refs.main)

      var option = {
        // 标题
        title: {
          text: '用户来源'
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          trigger: 'axis', // 激活提示框
          axisPointer: {
            type: 'cross', // 提示框样式
            label: {
              backgroundColor: '#E9EEF3' // 提示框背景色
            }
          }
        },
        // 图表距离左边、右边、下边的相对距离
        grid: {
          left: '9%',
          right: '4%',
          bottom: '8%'
        },
        // x轴属性设置
        xAxis: [
          {
            // 坐标轴两边不要留白
            boundaryGap: false
          }
        ]
      }
      // 绘制图表
      myChart.setOption(_.merge(res.data, option))

      // 生成图表数据
      // myChart.setOption({
      //   title: {
      //     text: 'ECharts 入门示例'
      //   },
      //   tooltip: {},
      //   xAxis: {
      //     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      //   },
      //   yAxis: {},
      //   series: [
      //     {
      //       name: '销量',
      //       type: 'bar',
      //       data: [5, 20, 36, 10, 10, 20]
      //     }
      //   ]
      // })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
